<template>
    <el-container>
        <el-header>
            <el-form :inline="true" :model="searchInline" class="demo-form-inline search-form">
                <el-form-item label="印章类型">
                    <el-input v-model="searchInline.sealType" placeholder="印章类型"></el-input>
                </el-form-item>
                <el-form-item label="文件类别">
                    <el-input v-model="searchInline.fileType" placeholder="文件类别"></el-input>
                </el-form-item>
                <el-form-item label="用章部门">
                    <el-input v-model="searchInline.deparment" placeholder="用章部门"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchData()">查询</el-button>
                    <el-button type="primary" @click="cleanall()">清空</el-button>
                    <el-button type="primary" @click="motalVisible=true">新建+</el-button>
                </el-form-item>
            </el-form>
            <!--新建申请单的模态框-->
            <el-dialog title="印章申请单" :visible.sync="motalVisible">
                <el-form :model="form">
                    <el-form-item label="申请部门:" :label-width="formLabelWidth">
                        <el-input v-model="form.department" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用章文件名称:" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="文件类别:" :label-width="formLabelWidth">
                        <el-input v-model="form.fileType" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="文件份数:" :label-width="formLabelWidth">
                        <el-input v-model="form.fileCount" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="印章类型:" :label-width="formLabelWidth">
                        <el-input v-model="form.sealType" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="经办人:" :label-width="formLabelWidth">
                        <el-input v-model="form.person" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="创建人:" :label-width="formLabelWidth">
                        <el-input v-model="form.createMan" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期:" :label-width="formLabelWidth">
                        <el-input v-model="form.createTime" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input v-model="form.remarks" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="motalVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createNew">确 定</el-button>
                </div>
            </el-dialog>
        </el-header>
        <el-main>
            <el-table
                    :data="sealData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :cell-style="cellStyle"
                    class="user-list"
                    :header-cell-style="rowClass"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="sealType"
                        label="印章类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="department"
                        label="用章部门"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="用章文件名称"
                        width="190">
                </el-table-column>
                <el-table-column
                        prop="fileType"
                        label="文件类别"
                        width="100">
                </el-table-column>
                <el-table-column
                    prop="fileCount"
                    label="文件份数"
                    width="80">
            </el-table-column>
                <el-table-column
                        prop="person"
                        label="经办人"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="createMan"
                        label="创建人"
                        width="80">
                </el-table-column>
                 <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="审批状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="remarks"
                        label="备注"
                        width="260">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button
                                @click="look(scope.row)"
                                type="text"
                                size="small">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="50"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="user-list-page"
                    :total="total">
            </el-pagination>
            <!--查看详情模态框-->
            <el-dialog title="印章申请详情" :visible.sync="dialogFormVisible">
                <el-form :model="formDetail">
                    <el-form-item label="申请部门:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.department" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="用章文件名称:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.name" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="文件类别:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.fileType" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="文件份数:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.fileCount" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="印章类型:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.sealType" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="经办人:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.person" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="创建人:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.createMan" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.createTime" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.remarks" autocomplete="off" readonly></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "seal",
        data(){
            return{
                searchInline:{
                    sealType:'',
                    fileType:'',
                    deparment:''
                },
                value1:'',
                sealData:[
                    {
                        sealType:'党章',
                        department:'文艺部',
                        name:'电脑文化艺术节开幕式晚会',
                        fileType:'文艺类',
                        fileCount:'1',
                        person:'陈',
                        createMan:'兰',
                        createTime:'2019-05-2',
                        status:'已通过审核',
                        remarks:'为电脑文化艺术节拉开序幕的晚会'
                    },
                    {
                        sealType:'党章',
                        department:'科技部',
                        name:'电脑文化艺术节志愿者招募',
                        fileType:'志愿类',
                        fileCount:'1',
                        person:'李',
                        createMan:'兰',
                        createTime:'2019-04-2',
                        status:'已通过审核',
                        remarks:'为电脑文化艺术节招募志愿者担当工作人员，保证活动的正常运行'
                    },
                    {
                        sealType:'党章',
                        department:'大学生职业发展中心',
                        name:'优秀毕业生汇报',
                        fileType:'汇报类',
                        fileCount:'1',
                        person:'代',
                        createMan:'兰',
                        createTime:'2019-05-2',
                        status:'已通过审核',
                        remarks:'邀请多位优秀毕业生为在校学生做分享，给在校学生以鼓励和经验'
                    },
                    {
                        sealType:'院章',
                        department:'学习部',
                        name:'多人假条',
                        fileType:'请假类',
                        fileCount:'1',
                        person:'古',
                        createMan:'兰',
                        createTime:'2019-03-6',
                        status:'已通过审核',
                        remarks:'为参加电脑文化艺术节的参赛人员、工作人员以及志愿者提供假条'
                    },
                    {
                        sealType:'党章',
                        department:'大学生职业发展中心',
                        name:'奖学金申报',
                        fileType:'奖助学金类',
                        fileCount:'1',
                        person:'于',
                        createMan:'兰',
                        createTime:'2019-03-2',
                        status:'已通过审核',
                        remarks:'为期末考试成绩优秀者申请奖学金'
                    },

                ],
                form:{
                    department:'',
                    name:'',
                    fileType:'',
                    fileCount:'',
                    sealType:'',
                    person:'',
                    createMan:'',
                    createTime:'',
                    remarks:'',
                },
                formDetail:{
                    sealId:'',
                    sealType:'',
                    department:'',
                    name:'',
                    fileType:'',
                    fileCount:'',
                    person:'',
                    createMan:'',
                    createTime:'',
                    status:'',
                    remarks:''
                },
                motalVisible:false,
                dialogFormVisible:false,
                formLabelWidth:'120px',
                // 分页
                currentPage: 1, //当前页
                pageSize:5, //每页显示
                total:''
            }
        },
        methods: {
            //查询搜索
            searchData() {
                let that = this
                let arr = this.sealData
                if(this.searchInline.sealType){
                    arr = arr.filter(function (val,index) {
                        return val.sealType == that.searchInline.sealType
                    });
                }
                if(this.searchInline.fileType){
                    arr = arr.filter(function (val,index) {
                        return val.fileType == that.searchInline.fileType
                    });
                }
                if(this.searchInline.deparment){
                    arr = arr.filter(function (val,index) {
                        return val.department == that.searchInline.deparment
                    });
                }
                this.sealData = arr
                that.total = that.sealData.length;
            },
            //清空
            cleanall(){
                this.searchInline.sealType = '';
                this.searchInline.fileType = '';
                this.searchInline.deparment = '';
                this.$router.go(0)
            },
            //新建申请单（假数据，刷新就没）
            createNew() {
                console.log("111")
                var seal= {
                    sealType:this.form.sealType,
                    department:this.form.department,
                    name:this.form.name,
                    fileType:this.form.fileType,
                    fileCount:this.form.fileCount,
                    person:this.form.person,
                    createMan:this.form.createMan,
                    createTime:this.form.createTime,
                    remarks:this.form.remarks
                }
                console.log("11" + seal)
                this.sealData.push(seal)
                console.log(this.sealData)
                this.form.sealType = this.form.department = this.form.name = this.form.fileType
                    = this.form.fileCount = this.form.person = this.form.createMan
                    = this.form.createTime = this.form.remarks =''//添加后就为空
                this.motalVisible = false
                this.total = this.sealData.length
            },
            //查看详情单
            look(e) {
                this.dialogFormVisible = true
                this.formDetail = e
            },
            //表格数据居中显示
            cellStyle({row, column, rowIndex, columnIndex}) {
                return "text-align:center"
            },
            rowClass({row,rowIndex}){
                return "text-align:center"
            },
            //分页功能
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val)  {
                this.currentPage = val
            }
        },
        created() {
            this.total = this.sealData.length
        },

    }
</script>

<style scoped>
    .search-form {
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list-page{
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
        text-align: center;
    }
</style>